<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>路由组件传参</title>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <router-view></router-view>
    <hr>
    <router-link to="/">主目录</router-link>
    <router-link to="/user/chen">CHEN</router-link>
  </div>

  <script>
    // 1. 定义路由组件
    // const User = { template: `<div>User {{ $route.params.id }}</div>` };

    // TODO: 通过`props`将组件与路由解耦, 在路由组件对象要将参数`props`设置为true
    const User = {
      props: ['id'],
      template: `<div>User {{ id }}</div>`
    };

    const Foo = { template: `<div>Foo</div>` };
    const Bar = { template: `<div>Bar</div>` };

    // 2. 创建`router`实例
    const router = new VueRouter({
      // `vue-router`默认加载hash模式 —— 使用URL的hash
      mode: 'history',
      routes: [
        {
          path: '/user/:id',
          component: User,
          // 解耦路由参数是否开启: 如果为`true`, route.params将会被设置为组件属性
          props: true
        },
        // 在命名视图中如何应用？
        // ps: 对于包含命名视图的路由, 你必须分别为每个命名视图添加`props`选项:
        {
          path: '/user/:id',
          component: {
            default: User,
            foo: Foo
          },
          // 如下
          props: {
            default: true,
            foo: false
          }
        }
      ]
    });

    // 3. 创建`vue`实例并将router挂载
    const app = new Vue({
      router
    }).$mount('#app');
  </script>

</body>

</html>